import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref,
  toDisplayString
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-decoration-11" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "stroke"];
const _hoisted_4 = ["fill", "stroke", "points"];
const _hoisted_5 = ["fill", "stroke", "points"];
const _hoisted_6 = ["fill", "stroke", "points"];
const _hoisted_7 = ["fill", "stroke", "points"];
const _hoisted_8 = ["stroke", "points"];
const _hoisted_9 = ["stroke", "points"];
const _hoisted_10 = { class: "decoration-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Decoration",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(200);
    const height = ref(60);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              width: width.value,
              height: height.value
            },
            [
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.color2,
                  stroke: unref(propValue).base.color2,
                  points: `20 10, 25 4, 55 4 60 10`
                },
                null,
                8,
                _hoisted_3
              ),
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.color2,
                  stroke: unref(propValue).base.color2,
                  points: `20 ${height.value - 10}, 25 ${
                    height.value - 4
                  }, 55 ${height.value - 4} 60 ${height.value - 10}`
                },
                null,
                8,
                _hoisted_4
              ),
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.color2,
                  stroke: unref(propValue).base.color2,
                  points: `${width.value - 20} 10, ${width.value - 25} 4, ${
                    width.value - 55
                  } 4 ${width.value - 60} 10`
                },
                null,
                8,
                _hoisted_5
              ),
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.color2,
                  stroke: unref(propValue).base.color2,
                  points: `${width.value - 20} ${height.value - 10}, ${
                    width.value - 25
                  } ${height.value - 4}, ${width.value - 55} ${
                    height.value - 4
                  } ${width.value - 60} ${height.value - 10}`
                },
                null,
                8,
                _hoisted_6
              ),
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.color1,
                  stroke: unref(propValue).base.color1,
                  points: `
          20 10, 5 ${height.value / 2} 20 ${height.value - 10}
          ${width.value - 20} ${height.value - 10} ${width.value - 5} ${
                    height.value / 2
                  } ${width.value - 20} 10
        `
                },
                null,
                8,
                _hoisted_7
              ),
              createElementVNode(
                "polyline",
                {
                  fill: "transparent",
                  stroke: unref(propValue).base.color1,
                  points: `25 18, 15 ${height.value / 2} 25 ${
                    height.value - 18
                  }`
                },
                null,
                8,
                _hoisted_8
              ),
              createElementVNode(
                "polyline",
                {
                  fill: "transparent",
                  stroke: unref(propValue).base.color1,
                  points: `${width.value - 25} 18, ${width.value - 15} ${
                    height.value / 2
                  } ${width.value - 25} ${height.value - 18}`
                },
                null,
                8,
                _hoisted_9
              )
            ],
            8,
            _hoisted_2
          )),
          createElementVNode(
            "div",
            _hoisted_10,
            toDisplayString(unref(propValue).base.text),
            1
          )
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const Decoration = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-b53a46eb"]
]);
export { Decoration as default };
